<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外间距 margin</title>

    <style>
        .father{
            width: 640px;
            height: 640px;
            background: pink;
        }

        .top{
            width: 600px;
            height: 200px;
            background: #ffff11;
            float:left;
        }

        .left{
            width: 200px;
            height: 200px;
            background: blue;
            float: left;
        }

        .self{
            width: 200px;
            height: 200px;
            background: tomato;
            float: left;

            /*margin-top: 10px;*/
            /*margin-right: 10px;*/
            /*margin-left: 10px;*/
            /*margin-bottom: 10px;*/

            /*- 四个参数设置四个边的距离 上、右、下、左*/
            /*margin:10px 15px 20px 25px;*/
            /*- 三个参数设置四个边的距离 上、右左、下*/
            /*margin:10px 20px 15px;*/
            /*- 两个参数设置四个边的距离 上下、右左*/
            /*margin:10px 20px;*/
            /*- 一个参数设置四个边的距离(设置设置上右下左)*/
            margin:10px;


        }

        .right{
            width: 200px;
            height: 200px;
            background: deeppink;
            float: left;
        }

        .bottom{
            width: 600px;
            height: 200px;
            background: indianred;
            float: left;
        }


        /*margin 合并问题 只有垂直有合并问题 取最大值*/

        .one{
            width: 100px;
            height: 100px;
            background: red;
            margin-bottom: 50px;
        }

        .two{
            width: 100px;
            height: 100px;
            background: blue;
            margin-top: 50px;
        }

        /*以上两个元素,按照人的惯性逻辑来说,两元素直接的间距应该是150px,但是其实是100px*/





    </style>



</head>
<body>

<div class="one"></div>
<div class="two"></div>

<div class="father">
    <div class="top">顶部元素</div>
    <div class="left">左侧元素</div>
    <div class="self">当前元素</div>
    <div class="right">右侧元素</div>
    <div class="bottom">底部元素</div>
</div>
<div class="three"></div>
</body>
</html>